<template>
  <div class="container">
    <FortenVxetableStatic :data="data" :columns="tableColumns" :maxHeight="maxHeight" :btnList="btnList" @userFun="userFun" pkName="name"
                          :searchFieldArr="['name','title']"
                          searchPlaceholder="搜索字段名/显示名"
                          :defaultSort="defaultSort"
                          :disabled="disabled"
    ></FortenVxetableStatic>
  </div>
</template>

<script>
/* eslint-disable*/
import FortenVxetableStatic from '@/components/common/FortenVxetableStatic.vue'

//固定数组字典
let dictMap = {
  sortableList: [
    { label: '不排序', value: 'false' },
    { label: '前端排序', value: 'true' },
    { label: '后端排序', value: 'custom' }
  ],
  alignList: [
    { label: '左对齐', value: 'left' },
    { label: '右对齐', value: 'right' },
    { label: '居中', value: 'center' }
  ],

  defaultSortList: [
    { label: '不默认', value: '' },
    { label: '默认升序', value: 'ascending' },
    { label: '默认降序', value: 'descending' }
  ],
  queryTypeList: [
    { value: 'none', label: '不显示' },
    { value: 'text', label: '文本框' },
    { value: 'numberArea', label: '值区间' },
    { value: 'dateArea', label: '日期区间' },
    { value: 'select', label: '下拉框' },
    { value: 'FortenDataviewDown', label: '通用下拉dataview' },
  ],
  editRenderList: [
    { value: '$input', label: '默认' },
    { value: 'ElSelect', label: '下拉框' },
    { value: 'ElDatePicker', label: '日期(即将废弃)'},
    { value: 'MatrDownTable', label: '耗材(即将废弃)' },
    { value: 'MatrUnitDownTable', label: '包装(即将废弃)' },
    { value: 'FortenGrid', label: '通用下拉表(即将废弃)' },
    { value: 'FortenDataviewDown', label: '通用下拉dataview' },
    { value: 'FortenVxeDate', label: '通用日期框(即将废弃)' },
    { value: 'customSelect', label: '自定义选择-仅新增时存在' },
    { value: 'customSelectAlways', label: '自定义选择-始终存在' },
    { value: 'inputNumberGt0', label: '数字>0' },
    { value: 'customDatePicker', label: '日期-年月日' },
    { value: 'customDatePickerWithHms', label: '日期-年月日时分秒' },
    { value: 'customSelectStatic', label: '下拉框(静态，调用者自己传递options)' },
  ],
  dictTypeList: [],

  datePatternList: [
    { value: 'yyyy-MM-dd', label: '年-月-日' },
    { value: 'yyyy-MM-dd HH:mm:ss', label: '年-月-日 时:分:秒，24小时制' },
  ],
  fixedList:  [{
    value: 'left',
    label: 'left'
  }, {
    value: 'right',
    label: 'right'
  }, {
    value: 'no',
    label: 'no'
  }],
  linkRouteList: [],
  linkRoutePrimaryKeyList: [],
  sourceVuexList: [
    { value: 'getHospitalList', label: '医院(根据权限过滤后的)' },
    { value: 'getHospitalListForOrderAdd', label: '可采购医院(根据权限过滤后的)' },
    { value: 'getSpList', label: '供应商(根据权限过滤后的)' },
  ],
}


export default {
  title:'数据视图维护网格列',
  props:['data', 'disabled'],
  components: {
    FortenVxetableStatic
  },
  mounted() {
    this.init()
  },
  data() {
    return {
      //字段列表
      tableColumns: [],
      //按钮列表
      btnList: [{
        key: 'delete',
        icon: 'el-icon-delete',
        size: 'mini',
        style: {padding: '6px'},
        type: 'danger',
        title: '移除该列'
      }],
      maxHeight: window.innerHeight - 450,

      //默认排序
      defaultSort: {
        field: 'sort',
        order: 'asc',
      }
    }
  },
  methods: {
    //初始化操作
    init() {
      //数据字典
      dictMap.dictTypeList = this.$store.state.dicts.dictTypeList.map(ob => {
        return {value: ob.code, label: ob.name}
      })

      //超链列表
      let menus = this.$store.getters.menus
      this.addLinks(menus)

      //列配置
      this.tableColumns = [
        {field: 'name', title: '字段名', minWidth: 120, fixed: 'left', titleHelp: '数据字段名称'},
        {
          field: 'title',
          title: '显示名',
          minWidth: 120,
          editRender: {name: 'ElInput', attrs: {type: 'text'}},
          fixed: 'left',
          titleHelp: '列表显示的名称'
        },
        {
          field: 'hidden',
          title: '隐藏',
          minWidth: 80,
          editRender: {name: 'ElSwitch'},
          formatter: 'formatSwitch',
          titleHelp: '隐藏后列表和打印都不显示',
          filter: true
        },
        {
          field: 'hiddenWhen',
          title: '隐藏条件',
          minWidth: 200,
          editRender: {name: 'ElInput', attrs: {type: 'text'}},
          titleHelp: '条件成立时隐藏,eg: global.utils.isSp() ||  global.utils.isHp()',
        },
        //上下移动
        {
          field: 'sortable',
          title: '排序类型',
          minWidth: 100,
          editRender: {
            name: 'ElSelect',
            options: dictMap.sortableList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '列表默认的排序类型'
        },
        {
          field: 'defaultSort',
          title: '默认排序',
          minWidth: 100,
          editRender: {
            name: 'ElSelect',
            options: dictMap.defaultSortList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '列表默认的排序方式'
        },
        {
          field: 'width',
          title: '宽度',
          minWidth: 80,
          editRender: {name: 'ElInput', attrs: {type: 'text'}},
          titleHelp: '列表显示宽度，可设置为数字或者auto，不填的话为auto'
        },
        //上下移动
        {
          field: 'align',
          title: '列对齐',
          minWidth: 100,
          editRender: {
            name: 'ElSelect',
            options: dictMap.alignList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '列对齐方式，默认为居中'
        },
        {
          field: 'sort',
          title: '排序值',
          minWidth: 120,
          editRender: {name: 'ElInputNumber', attrs: {min: 0, max: 999}},
          titleHelp: '列表显示的顺序',

          //表头列按钮
          headBtnList: [
            {
              key: 'set0IfNull',
              size: 'mini',
              style: {padding: '2px'},
              type: 'danger',
              title: '将所有为空的排序置为0',
              text: '空置0'
            },
            {
              key: 'set999All',
              size: 'mini',
              style:  {padding: '2px'},
              type: 'danger',
              title: '将所有排序置为999',
              text: '全置999'
            }
          ],

          //排序
          sortable: true,

          //变化后进行排序，比如改了顺序
          changeSort: true
        },
        {
          field: 'edit',
          title: '开启行编辑',
          minWidth: 80,
          editRender: {name: 'ElSwitch'},
          formatter: 'formatSwitch',
          titleHelp: '是否启动单元格编辑',
          filter: true
        },
        {
          field: 'editRender',
          title: '编辑类型',
          minWidth: 120,
          titleHelp: '单元格编辑时使用的控件类型',
          editRender: {
            name: 'ElSelect',
            options: dictMap.editRenderList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
        },
        {
          field: 'isWrapLine',
          title: '换行显示',
          minWidth: 80,
          editRender: {name: 'ElSwitch'},
          formatter: 'formatSwitch',
          titleHelp: 'true:超过宽度，换行显示',
        },
        {
          field: 'queryType',
          title: '查询类型',
          minWidth: 120,
          editRender: {
            name: 'ElSelect',
            options: dictMap.queryTypeList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '列表搜索区的查询控件类型',
        },
        {
          field: 'sortQuery',
          title: '查询排序',
          minWidth: 80,
          editRender: {name: 'ElInput', attrs: {type: 'text'}},
          titleHelp: '查询区域的排序，不指定则为999'
        },
        {
          field: 'dict',
          title: '字典类型',
          minWidth: 140,
          editRender: {
            name: 'nameFun',
            //动态组件
            nameFun: (scope) => {
              if (!scope.row.queryType && this.strings.isBlank(scope.row.dict)) return ''
              if (scope.row.queryType == 'select') return 'ElSelect'
              if (scope.row.queryType == 'FortenDataviewDown') return 'FortenDataviewDown'
              return 'ElSelect'
            },
            options: dictMap.dictTypeList,
            props: {placeholder: `请选择`, filterable: true, clearable: true},
            nextEditField: 'defaultQuery'
          },
          titleHelp: '下拉框等查询控件时需要使用数据字典'
        },
        {
          field: 'sourceVuex',
          title: 'vuex数据源',
          minWidth: 140,
          editRender: {
            name: 'ElSelect',
            options: dictMap.sourceVuexList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: 'vue状态管理的数据源，下拉框使用',
        },
        {
          field: 'selectQueryField',
          title: '下拉框数据库查询字段',
          minWidth: 140,
          editRender: {name: 'ElInput', attrs: {type: 'text'}},
          titleHelp: '查询数据库时使用什么字段（不指定与字段名一致，一般需要使用id类字段查询速度快），比如：deptNameBill 设置为下拉框查询，可以设置此字段未deptIdBill，那么查询时使用 deptIdBill = 下拉框的值'
        },

        //此项动态
        {
          field: 'defaultQuery', title: '默认查询', minWidth: 120,
          editRender: {
            name: 'ElSelect',
            optionsFun: (scope) => {
              if (!scope.row.dict) {
                scope.column.editRender.options = []
                return []
              }
              scope.column.editRender.options = this.utils.getDictDataList(scope.row.dict)
              return scope.column.editRender.options
            },
            props: {placeholder: `请选择`, filterable: true, clearable: true},
            titleHelp: '当使用数据字典时，可以指定默认查询条件'
          },
          //默认查询级联字典类型
          formatter: ({row, column}) => {
            if (!row.dict) return
            return this.utils.getDictLabel(row.defaultQuery, row.dict, '无效', false)
          }
        },
        {
          field: 'queryLike',
          title: 'like查询',
          minWidth: 100,
          editRender: {name: 'ElSwitch'},
          formatter: 'formatSwitch',
          titleHelp: '字段查询强制使用like进行查询'
        },
        {
          field: 'showNoDict',
          title: '不转换字典显示',
          minWidth: 120,
          editRender: {name: 'ElSwitch'},
          formatter: 'formatSwitch',
          titleHelp: '原样显示数据，不做数据转换'
        },
        {
          field: 'datePattern',
          title: '日期格式',
          minWidth: 140,
          editRender: {
            name: 'ElSelect',
            options: dictMap.datePatternList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '日期类型显示的格式'
        },
        {
          field: 'linkRoute',
          title: '超链路由',
          minWidth: 140,
          editRender: {
            name: 'ElSelect',
            options: dictMap.linkRouteList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '指定后列表中该字段将显示为超链接'
        },
        //动态
        {
          field: 'linkRoutePrimaryKey',
          title: '超链主键',
          minWidth: 120,
          editRender: {
            name: 'ElSelect',
            optionsFun: (scope) => {
              //超链主键
              let linkRoutePrimaryKeyList = scope.data.map(ob => {
                return {value: ob.name, label: ob.title}
              })

              scope.column.editRender.options = linkRoutePrimaryKeyList
              return scope.column.editRender.options
            },
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '使用超链接打开菜单时，路由参数字段名称，一般都是主键类字段'
        },
        {
          field: 'fixed',
          title: '固定列',
          minWidth: 100,
          editRender: {
            name: 'ElSelect',
            options: dictMap.fixedList,
            props: {placeholder: `请选择`, filterable: true, clearable: true}
          },
          titleHelp: '列表显示的时候固定的类型'
        },
        {
          field: 'expandColumn',
          title: '展开行',
          minWidth: 80,
          editRender: {name: 'ElSwitch'},
          formatter: 'formatSwitch',
          titleHelp: '即嵌套表格显示，数据源需要特殊处理'
        },
        {
          field: 'groupUrl',
          title: '分组数据源',
          minWidth: 200,
          editRender: {
            name: 'ElInput',
            props: {placeholder: `请输入`, filterable: true, clearable: true}
          },
          titleHelp: '左侧分组条件执行时，可以指定带有数据源的字段，同时显示时，查询该数据源进行显示，value/name，在查询该数据源时，会把当前查询条件传过去，eg:/dept/apply_auto/getDistDemandDept'
        }
      ]
    },

    //添加超链接 递归
    addLinks(menus) {
      menus.forEach(menu => {
        if (menu.children && menu.children.length > 0) {
          this.addLinks(menu.children)
        } else if(this.strings.isNotBlank(menu.route)){
          dictMap.linkRouteList.push({value: menu.route, label: menu.title + menu.route})
        }
      })
    },
    //将所有为空的置为0
    set0IfNull(toNum) {
      if (isNaN(toNum)) toNum = 0
      this.$confirm('确定将所有为空的字段排序值置为'+toNum+'么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.forEach(column => {
          if (!column.sort || this.strings.isBlank(column.sort)) this.$set(column,'sort',toNum)
        })
      }).catch(() => {
      });
    },

    //将所有置为0
    set999All(col) {
      this.$confirm('确定将所有字段排序值置为999么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.forEach(column => {
          this.$set(column, 'sort', 999)
        })
      }).catch(() => {
      });
    },

    //回调函数
    userFun({config, scope}) {
      switch (config.key) {
        case 'rule': //设置验证规则
          this.handleRuleWindowOpen(scope)
          break

        case 'set0IfNull': //将所有为空的排序置为0
          this.set0IfNull()
          break
        case 'set999All': //将所有排序置为0
          this.set999All()
          break
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .container{
    height: auto !important;
  }
</style>
